<!--
 * @Author: your name
 * @Date: 2021-11-19 21:19:33
 * @LastEditTime: 2021-11-22 15:30:10
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \jf-nlitc\src\views\Home\xmxz\index.vue
-->
<template>
    <div>
        <div class="rightOne">
            <div style="display: flex;">
                <div class="arrow">></div>
                <p style="font-size:20px;margin-top:10px;font-weight:bold;margin-left: 10px;">地块信息</p>
            </div>
            <div class="infinfol">
                <div class="ijnhy">
                    <span>地块编号</span>
                    <span>0101</span>
                </div>
                <div class="ijnhy">
                    <span>用地面积</span>
                    <span>15171.64公顷</span>
                </div>
                <div class="ijnhy">
                    <span>建筑面积</span>
                    <span>15175.59万方</span>
                </div>
            </div>
        </div>
        <div class="rightOne">
            <div style="display: flex;">
                <div class="arrow">></div>
                <p style="font-size:20px;margin-top:10px;font-weight:bold;margin-left: 10px;">综合打分</p>
            </div>
            <div class="tubiao">
                <div
                    id="rightTwochart"
                    style="width:400px;height:300px; margin-left: 20px;"
                ></div>
            </div>
            <div class="detailed" @click="ClickDEN1">详细</div>
        </div>
    </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapState,mapActions } from "vuex";
export default {
    data() {
        return {
          option :{
      title: {
          text: ''
      },
      tooltip: {},
      legend: {
          top: 20,
          itemWidth: 12,
          itemHeight: 12,
          data: [''],
          textStyle: {
              color: '#fff'
          }
      },
      radar: {
          radius: '60%',
          splitNumber: 8,
          axisLine: {
              lineStyle: {
                  color: '#fff',
                  opacity: 0
              }
          },
          splitLine: {
              lineStyle: {
                  color: 'rgba(224,198,198,0.6)',
                  opacity: 1
              }
          },
          splitArea: {
              areaStyle: {
                  color: 'rgba(127,95,132,0.1)',
                  opacity: 1,
                  shadowBlur: 45,
                  shadowColor: 'rgba(0,0,0,0)',
                  shadowOffsetX: 0,
                  shadowOffsetY: 15,
              }
          },
          indicator: [{
              name: '区位条件',
              max: 21000
          }, {
              name: '公共交通',
              max: 11000
          }, {
              name: '生态环境',
              max: 31000
          }, {
              name: '属性规模',
              max: 11500
          }, {
              name: '土地成本',
              max: 51000
          }, {
              name: '综合打分',
              max: 21000
          }]
      },
      series: [{
          name: '预算 vs 开销',
          type: 'radar',
          symbolSize: 0,
          areaStyle: {
              normal: {
                  shadowBlur: 13,
                  shadowColor: 'rgba(0,0,0,.2)',
                  shadowOffsetX: 0,
                  shadowOffsetY: 10,
                  opacity: 1
              }
          },
          data: [{
              value: [5000, 7000, 12000, 11000, 15000, 14000],
              name: '综合打分',
          }]
      }],
      color: ['#759CFF'],
      backgroundColor: {
          type: 'radial',
          x: 0.4,
          y: 0.4,
          r: 0.35,
          colorStops: [{
              offset: 0,
              color: 'rgba(0, 5, 10, 0)' // 0% 处的颜色
          }, {
              offset: .4,
              color: 'rgba(0, 5, 10, 0)' // 100% 处的颜色
          }, {
              offset: 1,
              color: 'rgba(0, 5, 10, 0)' // 100% 处的颜色
          }],
          globalCoord: false // 缺省为 false
      }
  }
        };
    },

    watch: {},
    methods: {
            ...mapActions({
            setIsShowRight_act: "Sjsx/setIsShowRight_act",
        }),
        showchart() {
            let myChart = echarts.init(document.getElementById('rightTwochart'))
            myChart.setOption(this.option)
        },
       ClickDEN1(val) {
            this.$store.state.Sjsx.IsShowRight1 = !this.$store.state.Sjsx.IsShowRight1

        },
    },
    created() { },
    mounted() {
        this.showchart()
    },
    beforeCreate() { },
    beforeMount() { },
    beforeUpdate() { },
    updated() {
        // this.getResultCode();
    },
    beforeDestroy() { },
    destroyed() { },
    activated() { },

};
</script>

<style lang="scss" scoped>
.rightOne {
    width: 435px;
    height: 220px;
    // border: 1px solid #fff;
    margin-top: 20px;
    .arrow {
        font-size: 35px;
        cursor: pointer;
    }
    .infinfol {
        width: 280px;
        height: 170px;
        // border: 1px solid #fff;
        margin-top: 10px;
        margin-left: 35px;
        .ijnhy {
            display: flex;
            justify-content: space-between;
            width: 280px;
            height: 50px;
            // border: 1px solid #fff;
            span {
                font-size: 20px;
            }
        }
    }
    .detailed{
        width: 100px;
        height: 30px;
        background-color: #5B9BD5;
        margin:40px 0 0 180px;
        text-align: center;
        line-height:30px;
        cursor: pointer;
    }
}
</style>

